<script setup lang="ts">
import { h, onBeforeUnmount } from 'vue'
import { Modal, Dropdown, Menu } from 'ant-design-vue'
import { ReloadOutlined, CheckCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
import type { PaginationProps, TableProps } from 'ant-design-vue'
import { ExclamationCircleFilled } from '@ant-design/icons-vue'
import type { RegistrationItem, ExamSubject } from '~/api/common/login'
import { getRegistrationListApi, getSubjectsApi } from '~/api/common/login'

defineOptions({
  name: 'InvoiceManagement',
  components: {
    Dropdown,
    Menu,
  },
})

type TableRow = RegistrationItem & {
  key: number
}

// 发票状态映射函数
function getInvoiceStatusText(status: number): string {
  const statusMap: Record<number, string> = {
    3: '缴费待审核（已申请开发票）',
    5: '已缴费成功（申请发票 发票审核中）',
    6: '已缴费成功（申请发票 发票已开）',
    8: '缴费审核拒绝（已申请开发票 发票未开票失败）',
  }
  return statusMap[status] || '未知状态'
}

// 根据屏幕尺寸动态调整列宽
const getColumns = () => {
  const isSmallScreen = typeof window !== 'undefined' && (window.innerWidth < 1400 || window.innerHeight < 800)
  const baseWidth = isSmallScreen ? 0.85 : 1
  
  return [
    { title: '姓名', dataIndex: 'username', width: Math.round(100 * baseWidth), fixed: 'left' as const, align: 'center' as const },
    { title: '发票类型', dataIndex: 'invoice_type', width: Math.round(120 * baseWidth), align: 'center' as const },
    { title: '发票内容', dataIndex: 'invoice_content', width: Math.round(150 * baseWidth), align: 'center' as const },
    { title: '发票抬头', dataIndex: 'invoice_title', width: Math.round(250 * baseWidth), align: 'center' as const },
    { title: '纳税号', dataIndex: 'taxpayer_id', width: Math.round(150 * baseWidth), align: 'center' as const },
    { title: '发票状态', dataIndex: 'registration_status', width: Math.round(150 * baseWidth), fixed: 'right' as const, align: 'center' as const },
    { title: '操作', dataIndex: 'action', width: Math.round(150 * baseWidth), fixed: 'right' as const, align: 'center' as const },
  ]
}

const columns = shallowRef(getColumns())

// 监听窗口大小变化，动态调整列宽
if (typeof window !== 'undefined') {
  const updateColumns = () => {
    columns.value = getColumns()
  }
  window.addEventListener('resize', updateColumns)
  onBeforeUnmount(() => {
    window.removeEventListener('resize', updateColumns)
  })
}

const loading = shallowRef(false)
const pagination = computed<PaginationProps | false>(() => {
  if (paginationData.total <= 10) {
    return false
  }
  return {
    pageSize: paginationData.pageSize,
    pageSizeOptions: ['10', '20', '30', '40'],
    current: paginationData.current,
    total: paginationData.total,
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: total => `共 ${total} 条`,
    onChange(current, pageSize) {
      paginationData.pageSize = pageSize
      paginationData.current = current
      init()
    },
  }
})

const paginationData = reactive({
  pageSize: 10,
  current: 1,
  total: 0,
})
const dataSource = shallowRef<TableRow[]>([])

// 主题色系
const PRIMARY_COLOR = '#428bca'
const PRIMARY_COLOR_LIGHT = '#5fa2d6'

// 搜索表单
const searchForm = reactive({
  keyword: '', // 姓名搜索
  examSubject: 'all', // 考试科目
  dateRange: undefined as [string, string] | undefined,
  invoiceStatus: 'all', // 发票状态：3-待审核，5-已审核
})

// 科目列表
const subjectList = ref<ExamSubject[]>([])

// 发票状态选项
const invoiceStatusOptions = [
  { value: 'all', label: '全部' },
  { value: '3', label: '缴费待审核（已申请开发票）' },
  { value: '5', label: '已缴费成功（申请发票 发票审核中）' },
  { value: '6', label: '已缴费成功（申请发票 发票已开）' },
  { value: '8', label: '缴费审核拒绝（已申请开发票 发票未开票失败）' },
]

// 详情抽屉
const detailDrawerVisible = ref(false)
const currentDetailRow = ref<TableRow | null>(null)
const drawerTitle = computed(() => {
  if (currentDetailRow.value?.username) {
    return `${currentDetailRow.value.username} 的发票详情`
  }
  return '发票详情'
})
const isDrawerInvoiceEnabled = computed(() => currentDetailRow.value?.registration_status === 3 || currentDetailRow.value?.registration_status === 5)

async function init() {
  if (loading.value)
    return
  loading.value = true
  try {
    const params: any = {
      current: paginationData.current,
      pageSize: paginationData.pageSize,
    }
    
    // 添加姓名搜索
    if (searchForm.keyword) {
      params.name = searchForm.keyword
      params.keyword = searchForm.keyword
    }
    
    // 添加考试科目筛选
    if (searchForm.examSubject && searchForm.examSubject !== 'all') {
      const subjectId = Number(searchForm.examSubject)
      params.subject_id = subjectId
      params.exam_subject_id = subjectId
      params.subjectId = subjectId
    }
    
    // 发票状态筛选在前端进行，不传参数给后端
    
    // 添加时间范围
    if (searchForm.dateRange && Array.isArray(searchForm.dateRange) && searchForm.dateRange.length === 2) {
      const startDate = searchForm.dateRange[0] as any
      const endDate = searchForm.dateRange[1] as any
      params.startDate = typeof startDate === 'string' ? startDate : (startDate?.format ? startDate.format('YYYY-MM-DD') : String(startDate))
      params.endDate = typeof endDate === 'string' ? endDate : (endDate?.format ? endDate.format('YYYY-MM-DD') : String(endDate))
    }
    
    const response = await getRegistrationListApi(params)
    
    if (response.code === 0 && response.data && Array.isArray(response.data)) {
      let filteredData: RegistrationItem[] = response.data
      
      // 前端筛选：只显示与发票相关的状态（3、5、6、8）
      filteredData = filteredData.filter((item: RegistrationItem) => {
        return item.registration_status === 3 || item.registration_status === 5 || item.registration_status === 6 || item.registration_status === 8
      })
      
      // 按姓名筛选
      if (searchForm.keyword) {
        const keyword = searchForm.keyword.toLowerCase().trim()
        filteredData = filteredData.filter((item: RegistrationItem) => {
          const username = (item.username || '').toLowerCase()
          return username.includes(keyword)
        })
      }
      
      // 按考试科目筛选
      if (searchForm.examSubject && searchForm.examSubject !== 'all') {
        const subjectId = Number(searchForm.examSubject)
        const selectedSubject = subjectList.value.find(s => Number(s.id) === subjectId)
        filteredData = filteredData.filter((item: RegistrationItem) => {
          if (item.exam_subject?.id && (Number(item.exam_subject.id) === subjectId || item.exam_subject.id === subjectId)) {
            return true
          }
          if (selectedSubject && item.subject_code === selectedSubject.subject_code) {
            return true
          }
          if (selectedSubject && item.exam_subject?.subject_name === selectedSubject.subject_name) {
            return true
          }
          return false
        })
      }
      
      // 按发票状态筛选
      if (searchForm.invoiceStatus && searchForm.invoiceStatus !== 'all') {
        const status = Number(searchForm.invoiceStatus)
        filteredData = filteredData.filter((item: RegistrationItem) => {
          return item.registration_status === status
        })
      }
      
      // 按时间范围筛选
      if (searchForm.dateRange && Array.isArray(searchForm.dateRange) && searchForm.dateRange.length === 2) {
        const startDate = searchForm.dateRange[0] as any
        const endDate = searchForm.dateRange[1] as any
        const start = typeof startDate === 'string' ? startDate : (startDate?.format ? startDate.format('YYYY-MM-DD') : String(startDate))
        const end = typeof endDate === 'string' ? endDate : (endDate?.format ? endDate.format('YYYY-MM-DD') : String(endDate))
        
        filteredData = filteredData.filter((item: RegistrationItem) => {
          if (!item.registration_time) return false
          const regDate = item.registration_time.split(' ')[0]
          return regDate >= start && regDate <= end
        })
      }
      
      const formattedData: TableRow[] = filteredData.map((item: RegistrationItem, index: number) => ({
        ...item,
        key: item.id || index,
      }))
      dataSource.value = formattedData
      paginationData.total = filteredData.length || formattedData.length
    }
    else {
      dataSource.value = []
      paginationData.total = 0
    }
  }
  catch (error) {
    console.error('获取发票列表失败:', error)
    dataSource.value = []
    paginationData.total = 0
  }
  finally {
    loading.value = false
  }
}

async function onSearch() {
  paginationData.current = 1
  await init()
}

function onReset() {
  searchForm.keyword = ''
  searchForm.examSubject = 'all'
  searchForm.dateRange = undefined
  searchForm.invoiceStatus = 'all'
  paginationData.current = 1
  init()
}

function handleExamSubjectChange(value: any) {
  searchForm.examSubject = value === 'all' || value === null || value === undefined ? 'all' : String(value)
  paginationData.current = 1
  init()
}

function handleInvoiceStatusChange(value: any) {
  searchForm.invoiceStatus = value || 'all'
  paginationData.current = 1
  init()
}

async function loadSubjects() {
  try {
    const response = await getSubjectsApi()
    if (response.code === 0 && response.data && Array.isArray(response.data)) {
      subjectList.value = response.data
    }
  }
  catch (error) {
    console.error('获取科目列表失败:', error)
  }
}

// 申请开票
async function handleInvoiceApprove(_row: TableRow) {
  Modal.info({
    title: h('span', { style: 'font-size: 16px;' }, '提示'),
    content: h('div', { style: 'font-size: 16px; line-height: 24px; color: #333;' }, '下一步开发中'),
    icon: h(ExclamationCircleFilled, { style: { color: PRIMARY_COLOR } }),
    okText: '确定',
    okButtonProps: { 
      style: { 
        backgroundColor: PRIMARY_COLOR, 
        border: 'none', 
        borderRadius: '0px',
        fontSize: '16px',
        height: '36px',
        padding: '0 20px',
      },
    } as any,
    centered: true,
  })
}

function handleView(row: TableRow) {
  currentDetailRow.value = row
  detailDrawerVisible.value = true
}

function handleDrawerClose() {
  detailDrawerVisible.value = false
  currentDetailRow.value = null
}

function handleDrawerInvoiceApprove() {
  if (!currentDetailRow.value) {
    return
  }
  handleInvoiceApprove(currentDetailRow.value)
}

onMounted(() => {
  loadSubjects()
  init()
})
</script>

<template>
  <page-container>
    <div class="table-toolbar">
      <a-space size="large">
        <a-form :model="searchForm" layout="inline">
          <a-form-item style="padding-top: 8px;">
            <template #label>
              <span style="color:black; font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', Arial, 'SimSun', 'sans-serif'; font-size:15px; font-weight: 500;">
                姓名
              </span>
            </template>
            <a-input
              v-model:value="searchForm.keyword"
              placeholder="请输入姓名"
              style="width: 200px; position:relative; top:-5px; height: 40px; border-radius: 10px;"
              allow-clear
              @press-enter="onSearch"
            />
          </a-form-item>
          <a-form-item style="padding-top: 8px;">
            <template #label>
              <span style="color:black; font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', Arial, 'SimSun', 'sans-serif'; font-size:15px; font-weight: 500;">
                考试科目
              </span>
            </template>
            <a-select
              style="position:relative; top:-5px; border-radius: 10px;"
              v-model:value="searchForm.examSubject"
              @change="handleExamSubjectChange"
              class="audit-status-select"
            >
              <a-select-option :value="'all'">全部</a-select-option>
              <a-select-option 
                v-for="subject in subjectList" 
                :key="subject.id" 
                :value="String(subject.id)">
                {{ subject.subject_name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item style="padding-top: 8px;">
            <template #label>
              <span style="color:black; font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', Arial, 'SimSun', 'sans-serif'; font-size:15px; font-weight: 500;">
                发票状态
              </span>
            </template>
            <a-select
              style="position:relative; top:-5px; border-radius: 10px;"
              v-model:value="searchForm.invoiceStatus"
              @change="handleInvoiceStatusChange"
              class="audit-status-select"
            >
              <a-select-option 
                v-for="option in invoiceStatusOptions" 
                :key="option.value" 
                :value="option.value">
                {{ option.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item style="padding-top: 8px;">
            <template #label>
              <span style="color:black; font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', Arial, 'SimSun', 'sans-serif'; font-size:15px; font-weight: 500;">
                报名时间
              </span>
            </template>
            <a-range-picker
              v-model:value="searchForm.dateRange"
              style="width: 220px; position: relative; top:-5px; height: 40px;"
              format="YYYY-MM-DD"
            />
          </a-form-item>
          <a-form-item style="padding-top: 8px;">
            <a-space>
              <a-button
                style="height: 36px; border-radius: 0px; position: relative; top:-2px;"
                class="primary-btn"
                type="primary"
                @click="onSearch">
                查询
              </a-button>
              <a-button 
                style="height: 36px; border-radius: 0px; position: relative; top:-2px;"
                class="primary-btn ghost-btn"
                @click="onReset">
                重置
              </a-button>
            </a-space>
          </a-form-item>
        </a-form>
      </a-space>
      <a-space size="middle">
        <a-button 
          class="refresh-btn"
          size="large"
          @click="onSearch">
          <template #icon>
            <ReloadOutlined />
          </template>
          刷新
        </a-button>
      </a-space>
    </div>
    
    <div class="table-wrapper">
      <a-table 
        :loading="loading" 
        :columns="columns"
        :data-source="dataSource"
        :pagination="pagination" 
        :size="'large' as TableProps['size']"
        :scroll="{ x: 'max-content', y: 'calc(100vh - 350px)' }"
        :style="{ fontSize: 'inherit' }"
        class="exam-table">
        <template #bodyCell="scope">
          <template v-if="scope?.column?.dataIndex === 'invoice_type'">
            <span>{{ scope.record.invoice_type === 1 ?
             '增值税专用发票' : scope.record.invoice_type === 2 ? 
             '增值税普通发票' : '-' }}</span>
          </template>
          <template v-else-if="scope?.column?.dataIndex === 'invoice_content'">
            <span>{{ scope.record.exam_subject?.exam_class + '考试费' || '-' }}</span>
          </template>
          <template v-else-if="scope?.column?.dataIndex === 'registration_status'">
            <div class="status-cell">
              <CheckCircleOutlined 
                v-if="scope.record.registration_status === 6"
                :style="{ color: PRIMARY_COLOR_LIGHT, marginRight: '6px', fontSize: '16px' }" 
              />
              <ExclamationCircleOutlined 
                v-else-if="scope.record.registration_status === 8"
                :style="{ color: '#ff4d4f', marginRight: '6px', fontSize: '16px' }" 
              />
              <ExclamationCircleOutlined 
                v-else
                :style="{ color: PRIMARY_COLOR_LIGHT, marginRight: '6px', fontSize: '16px' }" 
              />
              <span>{{ getInvoiceStatusText(scope.record.registration_status) }}</span>
            </div>
          </template>
          <template v-else-if="scope?.column?.dataIndex === 'action'">
            <div class="action-cell">
              <template v-if="scope.record.registration_status === 3 || scope.record.registration_status === 5">
                <a-button
                  class="approve-btn approve-btn-style1"
                  type="primary" 
                  @click="handleInvoiceApprove(scope?.record as TableRow)">
                  申请开票
                </a-button>
                <a-button
                  class="view-btn"
                  @click="handleView(scope?.record as TableRow)">
                  查看
                </a-button>
              </template>
              <template v-else>
                <a-button
                  class="view-btn"
                  @click="handleView(scope?.record as TableRow)">
                  查看
                </a-button>
              </template>
            </div>
          </template>
        </template>
      </a-table>
    </div>
    
    <a-drawer
      v-model:open="detailDrawerVisible"
      :title="drawerTitle"
      placement="right"
      width="660"
      destroy-on-close
      class="detail-drawer"
      @close="handleDrawerClose"
    >
      <template v-if="currentDetailRow">
        <a-descriptions
          title="基本信息"
          :column="2"
          bordered
          size="small"
          class="detail-descriptions"
        >
          <a-descriptions-item label="姓名">
            {{ currentDetailRow.username || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="发票状态">
            {{ getInvoiceStatusText(currentDetailRow.registration_status) }}
          </a-descriptions-item>
          <a-descriptions-item label="报考科目">
            {{ currentDetailRow.exam_subject?.subject_name || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="报考费用">
            ¥{{ currentDetailRow.exam_fee || '0.00' }}
          </a-descriptions-item>
        </a-descriptions>

        <a-descriptions
          style="margin-top: 20px;"
          title="发票信息"
          :column="2"
          bordered
          size="small"
          class="detail-descriptions"
        >
          <a-descriptions-item label="发票类型">
            {{ currentDetailRow.invoice_type === 1 ? 
            '增值税专用发票' : currentDetailRow.invoice_type === 2 ? 
            '增值税普通发票' : '--' }}
          </a-descriptions-item>
          <a-descriptions-item label="发票内容">
            {{ currentDetailRow.exam_subject?.exam_class + '考试费' || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="发票抬头">
            {{ currentDetailRow.invoice_title || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="纳税号">
            {{ currentDetailRow.taxpayer_id || '-' }}
          </a-descriptions-item>
        </a-descriptions>
      </template>
      <div v-else class="drawer-empty">
        <a-empty description="暂无数据" />
      </div>
      <template #footer>
        <div class="drawer-footer">
          <a-space>
            <a-button
              v-if="isDrawerInvoiceEnabled"
              class="approve-btn approve-btn-style1 drawer-approve-btn"
              type="primary"
              @click="handleDrawerInvoiceApprove"
            >
              申请开票
            </a-button>
          </a-space> 
        </div>
      </template>
    </a-drawer>
  </page-container>
</template>

<style lang="less" scoped>
@import './index.css';
@primary-color: #428bca;
@primary-color-light: #5fa2d6;
@primary-color-muted: #9cb6de;
@primary-color-soft: #dfe8f6;
@primary-color-dark: #2f5c93;

.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 1px 2px;
  border-radius: 0px;
  position: relative;
  top:-15px;

  // 响应式：小屏幕时减小字体和间距
  @media screen and (max-width: 1400px) {
    margin-bottom: 12px;
    
    :deep(.ant-form-item-label > label) {
      font-size: 13px !important;
    }

    :deep(.ant-input),
    :deep(.ant-select-selector),
    :deep(.ant-picker) {
      font-size: 13px !important;
      height: 36px !important;
    }

    :deep(.ant-btn) {
      font-size: 13px !important;
      height: 32px !important;
      padding: 0 12px !important;
    }
  }

  @media screen and (max-height: 800px) {
    margin-bottom: 10px;
    
    :deep(.ant-form-item-label > label) {
      font-size: 12px !important;
    }

    :deep(.ant-input),
    :deep(.ant-select-selector),
    :deep(.ant-picker) {
      font-size: 12px !important;
      height: 32px !important;
    }

    :deep(.ant-btn) {
      font-size: 12px !important;
      height: 30px !important;
      padding: 0 10px !important;
    }
  }
}

.audit-status-select {
  min-width: 280px;

  :deep(.ant-select-selector) {
    height: 40px !important;
    border-radius: 4px !important;
    padding: 0 12px;
    display: flex;
    align-items: center;
  }

  :deep(.ant-select-selection-search-input) {
    height: 40px !important;
  }

  :deep(.ant-select-selection-item),
  :deep(.ant-select-selection-placeholder) {
    line-height: 40px !important;
    color: #000000 !important;
  }

  :deep(.ant-select-arrow) {
    color: #000000 !important;
  }
}

.primary-btn {
  background: linear-gradient(135deg, @primary-color 0%, @primary-color-light 100%);
  border: none;
  color: #fff;
  font-weight: 500;
  box-shadow: 0 2px 6px fade(@primary-color, 35%);
  transition: all 0.2s;

  &:hover {
    background: linear-gradient(135deg, @primary-color-dark 0%, @primary-color-light 100%);
    color: #fff !important;
  }
}

.ghost-btn {
  background: transparent !important;
  border: 1px solid @primary-color !important;
  color: @primary-color !important;
  box-shadow: none;

  &:hover {
    color: #fff !important;
    background: @primary-color !important;
  }
}

.table-wrapper {
  overflow-x: auto;
  width: 100%;
  position: relative;
  top:-15px;
  
  &::-webkit-scrollbar {
    height: 1px;
    width: 1px;
  }
  
  &::-webkit-scrollbar-track {
    border-radius: 2px;
  }
  
  &::-webkit-scrollbar-thumb {
    border-radius: 0px;
    transition: background 0.3s;
    
    &:hover {
      background: @primary-color-light;
    }
  }
  
  scrollbar-width: 1px;
}

.detail-drawer {
  :deep(.ant-drawer-header) {
    border-bottom: 1px solid #e4e7ed;
  }

  :deep(.ant-drawer-body) {
    padding: 12px 24px 24px;
  }

  :deep(.ant-drawer-footer) {
    border-top: 1px solid #e4e7ed;
    padding: 12px 24px;
    text-align: right;
    background-color: #fafafa;
  }
}

.detail-descriptions {
  :deep(.ant-descriptions-item-label) {
    width: 150px;
    font-weight: 500;
  }

  :deep(.ant-descriptions-item-content) {
    color: #333;
  }
}

.drawer-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.drawer-footer {
  display: flex;
  justify-content: flex-end;
}

.drawer-approve-btn {
  min-width: 120px;
}

.refresh-btn {
  border-radius: 0px;
  height: 40px;
  font-size: 16px;
  background: linear-gradient(135deg, @primary-color 0%, @primary-color-light 100%);
  border: 1px solid @primary-color-soft;
  color: #ffffff;
  font-weight: 500;
  
  &:hover {
    background: linear-gradient(135deg, @primary-color-dark 0%, @primary-color-light 100%);
    border-color: @primary-color-light;
    color: white;
    border: 1px solid @primary-color-soft;
  }
}

.exam-table {
  font-size: 18px;

  :deep(.ant-table-thead > tr > th) {
    font-size: 16px !important;
    font-weight: 500 !important;
    text-align: center !important;
    border-bottom: 1px solid #e4e7ed !important;
  }

  :deep(.ant-table-tbody > tr > td) {
    font-size: 16px !important;
    text-align: center !important;
  }

  // 响应式：小屏幕时减小字体
  @media screen and (max-width: 1400px) {
    font-size: 14px;

    :deep(.ant-table-thead > tr > th) {
      font-size: 13px !important;
      padding: 8px 4px !important;
    }

    :deep(.ant-table-tbody > tr > td) {
      font-size: 13px !important;
      padding: 8px 4px !important;
    }

    :deep(.ant-pagination) {
      font-size: 13px !important;
    }
  }

  @media screen and (max-height: 800px) {
    font-size: 14px;

    :deep(.ant-table-thead > tr > th) {
      font-size: 13px !important;
      padding: 6px 4px !important;
    }

    :deep(.ant-table-tbody > tr > td) {
      font-size: 13px !important;
      padding: 6px 4px !important;
    }
  }
  
  :deep(.ant-table-tbody > tr > td > span),
  :deep(.ant-table-tbody > tr > td > div) {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  :deep(.ant-pagination) {
    font-size: 16px !important;
    margin-top: 12px;

    .ant-pagination-total-text {
      color: @primary-color;
      font-weight: 500;
    }

    .ant-pagination-item {
      border-radius: 0;
      border-color: fade(@primary-color, 40%);

      a {
        color: @primary-color;
      }
    }

    .ant-pagination-item:hover {
      border-color: @primary-color;

      a {
        color: @primary-color-dark;
      }
    }

    .ant-pagination-item-active {
      background: @primary-color;
      border-color: @primary-color;

      a {
        color: #fff;
      }
    }

    .ant-pagination-prev .ant-pagination-item-link,
    .ant-pagination-next .ant-pagination-item-link {
      border-radius: 0;
      border-color: fade(@primary-color, 35%);
      color: @primary-color;

      &:hover {
        border-color: @primary-color;
        color: @primary-color-dark;
      }
    }
  }

  :deep(.ant-table-cell-fix-right) {
    background-color: #fff;
    z-index: 1;
  }

  :deep(.ant-table-thead > tr > th.ant-table-cell-fix-right) {
    z-index: 1;
  }
  
  :deep(.ant-spin-dot-item) {
    background-color: @primary-color-light !important;
  }
  
  :deep(.ant-spin) {
    color: @primary-color-light !important;
  }
  
  :deep(.ant-table-spin-holder) {
    .ant-spin-dot-item {
      background-color: @primary-color-light !important;
    }
  }
}

.action-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.approve-btn {
  height: 36px;
  font-size: 16px;
  border-radius: 0px;
  min-width: 120px;
  border: none;
  font-weight: 500;
  transition: all 0.1s;
}

.approve-btn-style1 {
  background: linear-gradient(135deg, @primary-color 0%, @primary-color-light 100%);
  color: #fff;
  box-shadow: 0 2px 4px rgba(66, 139, 202, 0.3);
  
  &:hover {
    background: linear-gradient(135deg, @primary-color-dark 0%, @primary-color-light 100%);
    box-shadow: 0 4px 8px rgba(66, 139, 202, 0.4);
    transform: translateY(-1px);
  }
}

.view-btn {
  height: 36px;
  font-size: 16px;
  border-radius: 0px;
  min-width: 86px;
  border: none;
  color: #fff;
  background: linear-gradient(135deg, @primary-color 0%, @primary-color-light 100%);
  font-weight: 500;
  transition: all 0.1s;
  box-shadow: 0 2px 4px rgba(66, 139, 202, 0.3);
  
  &:hover {
    color: white;
    background: linear-gradient(135deg, @primary-color-dark 0%, @primary-color-light 100%);
    box-shadow: 0 4px 8px rgba(66, 139, 202, 0.45);
    transform: translateY(-1px);
  }
}

.status-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
